<style>
	/*auto*/
	.ui-widgetlist { border: 1px solid #E0E0E0; font-size: 14px; color: black; position: relative; }
	.ui-widgetlist ul { list-style-type: none; width: 100%; height: 100%; overflow: auto; margin: 0; padding: 20px 10px; overflow-scrolling: touch; }
	.ui-widgetlist li { border: 0; padding: 5px 10px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; display: inline-block; width: 20%; transition: all 0.3s; }
	.ui-widgetlist li img { display: block; max-width: 100%; height: auto; border-radius: 4px; }
	.ui-widgetlist li:hover { transform: scale(0.95); }
	.ui-widgetlist li:hover .ui-widgetlist-picture { background-color: #E0E0E0; }
	.ui-widgetlist li .fa { width: 22px; font-size: 12px; border-right: 1px solid #E0E0E0; margin-right: 7px; color: #A0A0A0; }
	.ui-widgetlist-name { font-size: 11px; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 14px; }
	.ui-widgetlist-name b { font-size: 12px; }
	.ui-widgetlist-picture { background-color: #F8F8F8; padding: 10px; border-radius: 3px; }
	.ui-widgetlist-selected { background-color: #FFE7A4 !important; font-weight: bold; }
	.ui-widgetlist-search-empty { height: 34px; }
	.ui-widgetlist-search { border-bottom: 1px solid #E0E0E0; height: 34px; background-color: white; position: absolute; width: 100%; box-shadow: 0 5px 10px rgba(0,0,0,0.05); }
	.ui-widgetlist-search input { width: 100%; outline: 0; background-color: white; font: normal normal 12px Arial; border: 0; margin: 0; padding: 0; }
	.ui-widgetlist-search span { float: left; width: 30px; text-align: center; height: 30px; padding: 8px 0 0 0; font-size: 12px; color: #A0A0A0; }
	.ui-widgetlist-search .fa-times { color: red; cursor: pointer; }
	.ui-widgetlist-search div { margin-left: 30px; padding: 6px 10px 0 0; }
	.ui-widgetlist-invalid { border-color: #E1A1A1; background-color: #FFF3F3 !important; }
	.ui-widgetlist-invalid .ui-widgetlist-search { border-color: #E1A1A1; }
	.ui-widgetlist.ui-disabled input { background-color: #F0F0F0; color: gray; }
	.ui-widgetlist.ui-disabled .ui-widgetlist-search { background-color: #F0F0F0; }
	.ui-widgetlist.ui-disabled ul { color: gray; overflow: hidden; }
	.ui-widgetlist.ui-disabled li:hover { background-color: white; }
	.ui-widgetlist.ui-disabled li { cursor: not-allowed; }
	.ui-widgetlist.ui-disabled .ui-widgetlist-selected { background-color: #D0D0D0 !important; }

	@media(max-width: 768px) {
		.ui-widgetlist li { width: 33%; }
	}
</style>

<div data-jc="form" data-jc-path="cmseditor.form" class="hidden" data-jc-config="icon:plug;if:widgets;title:@(Widgets);width:888;autofocus:true;reload:cmseditor_widgets">
	<div class="padding">
		<div data-jc="widgetlist" data-jc-config="search:@(Search widgets);datasource:cmseditor.widgets;height:450;exec:cmseditor_widgets_select"></div>
	</div>
	<div class="ui-form-buttons">
		<button name="cancel" style="width:100%">@(Cancel)</button>
	</div>
</div>

<script>

	function cmseditor_widgets_select(id) {

		var item = cmseditor.widgets.findItem('id', id);
		var is = item.istemplate;
		var editor = cmseditor.instance;

		SET('cmseditor.form', '');

		var target = editor.getTarget();
		if (!target.hclass('CMS_widgets')) {
			var tmp = editor.getContainer(10);
			if (!tmp)
				return;
			target = tmp;
		}

		var after = target.hclass('CMS_widget');
		SETTER('loading', 'show');
		AJAX('GET [url]api/widgets/{0}/editor/'.format(id), function(response) {
			var content = '<div class="CMS_widget CMS_remove" data-cms-id="{0}" data-cms-widget="{1}">{2}</div>'.format(GUID(10), id, response);
			if (after)
				target.after(content);
			else
				target.append(content);
			editor.change(true);
			editor.resize();
			SETTER('loading', 'hide', 500);
		});
	}

	COMPONENT('widgetlist', function(self, config) {

		var Eitems, datasource = null;
		var skip = false;

		self.datasource = EMPTYARRAY;
		self.template = Tangular.compile('<li data-search="{{ search }}" data-index="{{ index }}"><div class="ui-widgetlist-picture"><img src="{{ if picture }}{{ picture }}{{ else }}{{ fi }}" alt="{{ text }}" border="0" /></div><div class="ui-widgetlist-name"><b>{{ text }}</b><br />{{ category }}</div></li>');

		self.validate = function(value) {
			return config.disabled || !config.required ? true : value ? (config.multiple ? value.length > 0 : true) : false;
		};

		self.reset = function() {
			setTimeout(function() {
				Eitems.prop('scrollTop', 0);
			}, 100);
		};

		self.make = function() {

			self.aclass('ui-widgetlist');
			self.redraw();

			config.datasource && self.reconfigure('datasource:' + config.datasource);
			config.items && self.reconfigure('items:' + config.items);

			self.event('click', 'li', function() {
				if (config.disabled)
					return;

				var index = +this.getAttribute('data-index');
				var value = self.datasource[index];

				skip = true;

				if (config.multiple) {
					var selected = self.get() || [];
					if (selected.indexOf(value.value) === -1)
						selected.push(value.value);
					else
						selected = selected.remove(value.value);
					self.set(selected);
					config.exec && EXEC(config.exec, selected);
				} else {
					self.set(value.value);
					config.exec && EXEC(config.exec, value.value);
				}

				self.change(true);
			});

			self.event('click', '.fa-times', function() {
				if (!config.disabled) {
					self.find('input').val('');
					self.search();
				}
			});

			typeof(config.search) === 'string' && self.event('keydown', 'input', function() {
				!config.disabled && setTimeout2(self.id, self.search, 500);
			});
		};

		self.configure = function(key, value, init) {
			if (init)
				return;

			var redraw = false;

			switch (key) {
				case 'type':
					self.type = value;
					break;
				case 'disabled':
					self.tclass('ui-disabled', value);
					self.find('input').prop('disabled', value);
					if (value)
						self.rclass('ui-widgetlist-invalid');
					else if (config.required)
						self.state(1, 1);
					break;
				case 'required':
					!value && self.state(1, 1);
					break;
				case 'search':
					redraw = true;
					break;
				case 'height':
					Eitems.css('height', value + 'px');
					break;
				case 'items':
					var arr = [];
					value.split(',').forEach(function(item) {
						item = item.trim().split('|');
						var obj = {};
						obj.name = item[0].trim();
						obj.id = (item[1] == null ? item[0] : item[1]).trim();
						if (config.type === 'number')
							obj.id = +obj.id;
						arr.push(obj);
					});
					self.bind('', arr);
					break;
				case 'datasource':
					datasource && self.unwatch(datasource, self.bind);
					self.watch(value, self.bind, true);
					datasource = value;
					break;
			}

			redraw && self.redraw();
		};

		self.search = function() {
			var search = config.search ? self.find('input').val().toSearch() : '';
			var first;
			Eitems.find('li').each(function() {
				var el = $(this);
				el.tclass('hidden', el.attrd('search').indexOf(search) === -1);
				if (!first && el.hclass('ui-widgetlist-selected'))
					first = el;
			});
			self.find('.ui-widgetlist-search-icon').tclass('fa-search', search.length === 0).tclass('fa-times', search.length > 0);
			!skip && first && first.get(0).scrollIntoView(true);
			skip = false;
		};

		self.redraw = function() {
			self.html((typeof(config.search) === 'string' ? '<div class="ui-widgetlist-search"><span><i class="fa fa-search ui-widgetlist-search-icon"></i></span><div><input type="text" placeholder="{0}" /></div></div><div><div class="ui-widgetlist-search-empty"></div>'.format(config.search) : '') + '<div><ul style="height:{0}px"></ul></div>'.format(config.height || '200'));
			Eitems = self.find('ul');
		};

		self.bind = function(path, value) {

			var kt = config.text || 'name';
			var kv = config.value || 'id';
			var ki = config.icon || 'icon';
			var builder = [];

			self.datasource = [];
			value && value.forEach(function(item, index) {

				var text;
				var value;
				var icon = null;

				if (typeof(item) === 'string') {
					text = item;
					value = self.parser(item);
				} else {
					text = item[kt];
					value = item[kv];
					icon = item[ki];
				}

				var item = { picture: item.picture, category: item.category, text: text, value: value, index: index, search: text.toSearch(), icon: icon };
				self.datasource.push(item);
				builder.push(self.template(item));
			});

			Eitems.empty().append(builder.join(''));
			self.search();
		};

		self.setter = function(value) {

			var selected = {};
			var ds = self.datasource;
			var dsl = ds.length;

			if (value != null) {
				if (config.multiple) {
					for (var i = 0, length = value.length; i < length; i++) {
						for (var j = 0; j < dsl; j++) {
							if (ds[j].value === value[i])
								selected[j] = true;
						}
					}
				} else {
					for (var j = 0; j < dsl; j++) {
						if (ds[j].value === value)
							selected[j] = true;
					}
				}
			}

			Eitems.find('li').each(function() {
				var el = $(this);
				var index = +el.attrd('index');
				var is = selected[index] !== undefined;
				el.tclass('ui-widgetlist-selected', is);
			});

			self.search();
		};

		self.state = function(type) {
			if (!type)
				return;
			var invalid = config.required ? self.isInvalid() : false;
			if (invalid === self.$oldstate)
				return;
			self.$oldstate = invalid;
			self.tclass('ui-widgetlist-invalid', invalid);
		};
	});

	function cmseditor_widgets() {
		SETTER('widgetlist', 'reset');
	}

</script>